<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width" />
    <meta name="author" content="www.yanshisan.cn" />
    <meta name="robots" content="all" />
    <title>留言板</title>
    <link rel="stylesheet" href="../font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../layui/css/layui.css" />
    <link rel="stylesheet" href="../css/master.css" />
    <link rel="stylesheet" href="../css/gloable.css" />
    <link rel="stylesheet" href="../css/nprogress.css" />
    <link rel="stylesheet" href="../css/message.css" />
    <link rel="shortcut icon" th:href="@{favicon.ico}" />
</head>
<body>
<div class="header">
</div>
<header class="gird-header">
    <div class="header-fixed">
        <div class="header-inner">
            <a href="javascript:void(0)" class="header-logo" id="logo">pilipili</a>
            <nav class="nav" id="nav">
                <ul>
                    <li><a href="/homepage">首页</a></li>
                    <li><a href="/article">博客</a></li>
                    <li><a href="/message">留言</a></li>
                    <li><a href="/link">友链</a></li>
                    <li><a href="/loginOut" th:if="${session.name}">退出</a></li>
                    <li><a href="#"><p th:inline="text" th:if="${session.name}">[[${session.name}]]</p></a></li>
                    <li><a href="#"  th:if="${session.name}">
                        <img th:src="'../image/'+${session.id}+'.jpg'" class="layui-nav-img" >
                    </a></li>
                </ul>
            </nav>
            <a href="/html/login.html"  th:if="not ${session.name}" class="blog-user">
                <p>请登录</p>
            </a>
            <a class="phone-menu">
                <i></i>
                <i></i>
                <i></i>
            </a>
        </div>
    </div>
</header>
<div class="doc-container" id="doc-container">
    <div class="container-fixed">
        <div class="container-inner">
            <section class="msg-remark">
                <div class="layui-upload">
                    <button type="button" class="layui-btn" id="test1">上传头像</button>
                    <div class="layui-upload-list">
                        <img th:src="'../image/'+${user.user_id}+'.jpg'" style="height: 200px;width: 200px;border-radius:100px;" id="demo1" >
                        <p id="demoText"></p>
                    </div>
                </div>
                <form class="layui-form" action=""  >
                    <div class="layui-form-item">
                        <label class="layui-form-label"></label>
                        <div class="layui-input-block">
                            <input  type="hidden" id="user_id" name="user_id" required lay-verify="required"  autocomplete="off" class="layui-input" th:value="${user.user_id}">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">用户密码</label>
                        <div class="layui-input-block">
                            <input type="password"  name="user_password" required lay-verify="pwd" placeholder="请输入密码" autocomplete="off" class="layui-input" id="pass1">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">确认密码</label>
                        <div class="layui-input-block">
                            <input type="password"  name="user_password" required lay-verify="pwd" placeholder="请再次输入密码" autocomplete="off" class="layui-input" id="pass2">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">邮箱</label>
                        <div class="layui-input-block">
                            <input type="email" id="user_email" name="user_email" required lay-verify="emails" placeholder="请输入邮箱" autocomplete="off" class="layui-input" th:value="${user.user_email}">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">联系方式</label>
                        <div class="layui-input-block">
                            <input type="text" id="user_phone" name="user_phone" required lay-verify="phones" placeholder="请输入手机号" autocomplete="off" class="layui-input" th:value="${user.user_phone}">
                        </div>
                    </div>
                    <div class="layui-form-item" pane="">
                        <label class="layui-form-label">性别</label>
                        <div class="layui-input-block">
                            <input type="radio" id="user_sex" name="user_sex" value="男" title="男" checked="">
                            <input type="radio"  name="user_sex" value="女" title="女">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">姓名</label>
                        <div class="layui-input-block">
                            <input type="text" id="user_name" name="user_name" required lay-verify="truename" placeholder="请输入您的姓名" autocomplete="off" class="layui-input" th:value="${user.user_name}">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">生日</label>
                        <div class="layui-input-block">
                            <input type="text"id="user_birthday" name="user_birthday" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input" th:value="${user.user_birthday}">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button id="submit" type="button" data-type="reload" class="layui-btn layui-btn-primary">立即提交</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </form>
            </section>
        </div>
    </div>
</div>
<footer class="grid-footer">
    <div class="footer-fixed">
        <div class="copyright">
            <div class="info">
                <div class="contact">
                    <a href="https://github.com/qz501664112/501664112.github.com.git" class="github" target="_blank"><i class="fa fa-github"></i></a>
                    <a href="https://wpa.qq.com/msgrd?v=3&uin=501664112&site=qq&menu=yes" class="qq" target="_blank" ><i class="fa fa-qq"></i></a>
                    <a href="https://mail.qq.com" class="email" target="_blank" ><i class="fa fa-envelope"></i></a>
                    <a href="weixin://" class="weixin"><i class="fa fa-weixin"></i></a>
                </div>
                <p class="mt05">
                    Copyright &copy; 2021-2021 初学者 All Rights Reserved
                </p>
            </div>
        </div>
    </div>
</footer>
<script src="../component/js/jquery-3.3.1.js"></script>
<script src="../component/layui/layui.js" charset="utf-8"></script>
<script src="../js/yss/gloable.js"></script>
<script src="../js/plugins/nprogress.js"></script>
<script>NProgress.start();</script>
<script src="../js/pagemessage.js"></script>
<script>NProgress.start();</script>
<script>
    window.onload = function () {
        NProgress.done();
    };
</script>
<script th:inline="javascript">
    layui.use(['upload', 'element', 'layer','form', 'layedit', 'laydate'], function() {
        var $ = layui.jquery
            , upload = layui.upload
            , element = layui.element
            , layer = layui.layer
            ,form = layui.form
            ,layedit = layui.layedit
            ,laydate = layui.laydate;
        //日期
        laydate.render({
            elem: '#user_birthday'
        });
        //常规使用 - 普通图片上传
        var uploadInst = upload.render({
                elem: '#test1'
                , url: '/user/updateImg?user_id='+[[${session.id}]] //改成您自己的上传接口
                , before: function (obj) {
                    //预读本地文件示例，不支持ie8
                    obj.preview(function (index, file, result) {
                        $('#demo1').attr('src', result); //图片链接（base64）
                    });

                    element.progress('demo', '0%'); //进度条复位
                    layer.msg('上传中', {icon: 16, time: 1});
                }
                , done: function (res) {
                    if(res.code > 0){
                        return layer.msg('上传失败');
                    }
                    //上传成功
                    var demoText = $('#demoText');
                    demoText.html('<span style="color: #4cae4c;">上传成功</span>');

                    var fileupload = $(".image");
                    fileupload.attr("value",res.data.src);
                    console.log(fileupload.attr("value"));
                    window.parent.location.reload();
                }
                , error: function () {
                    //演示失败状态，并实现重传
                    var demoText = $('#demoText');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                    demoText.find('.demo-reload').on('click', function () {
                        uploadInst.upload();
                    });
                }
            }
        )
    });
</script>
<script  th:inline="javascript">
    layui.use('form', function() {
        var form = layui.form;
        $("#submit").on("click", function () {
            $.ajax({
                type:'post',
                url:'/user/updateUser',
                data:{user_id:$("#user_id").val(),user_password:$("#pass1").val(),user_name:$("#user_name").val(),user_email:$("#user_email").val(),user_phone:$("#user_phone").val(),user_sex:$("#user_sex").val(),user_birthday:$("#user_birthday").val()},
                success:function (data) {
                    if (data.status==200){
                        layer.confirm('修改成功!')

                    }else {
                        layer.confirm('修改失败!')
                    }

                },
                error:function () {
                    layer.confirm('修改失败!')
                }
            })

        })
    });
</script>
</body>
</html>